﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>BingoTouch WebApp</title>
    <meta name="viewport" content="user-scalable=no" />
    <link rel="stylesheet" href="common/jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet" href="common/BingoTouch.css" />
    <script src="common/iscroll.js"></script>
    <script src="common/jquery-1.7.1.min.js"></script>
    <script src="common/jquery.mobile-1.1.0.min.js"></script>
    <script src="common/BingoTouch.js"></script>

    <script type="text/javascript" src="scripts/common.js"></script>

<script type="text/javascript">
    var id = BingoTouch.WebView.getPageParameter();
    BingoTouch.ready = function () {

        BingoTouch.WebView.wait(true);

        id = BingoTouch.WebView.getPageParameter();

        ReqGet(GetActivity + id, true, function (activityInfo) {

            if (!!!activityInfo) {
                BingoTouch.WebView.load('home.html');
                return;
            }
            $('#title').html(activityInfo.Title);
            $('#description').html(activityInfo.Description);

            ReqGet(GetActivityUsers + id, true, function (activityUsers) {
                var isCurEnter = false; var isCurSignIn = false; //当前用户是否已报名

                var strEnterUser = ''; var strSignInUser = '';
                //报名用户列表
                for (var i = 0; i < activityUsers.length; i++) {
                    var obj = activityUsers[i];
                    var isEnter = !!obj.IsEnter;
                    var isSignIn = !!obj.SignIn;
                    if (obj.UserID == currentUser.Id) {
                        isCurEnter = isEnter; isCurSignIn = isSignIn;
                    }

                    strEnterUser += '<li><div data-role="BTButton" data-icon="icon-list-right" icon-dir="right" data-url="account.html" url-arg="' + obj.UserID + '">'
                    strEnterUser += '<img src="' + context_path + (!!obj.Face ? obj.Face : 'images/NoFace.gif') + '" alt="" style="width:20%"/>';
                    strEnterUser += '<span id="' + obj.Id + '">' + obj.UserName
                    if (!isEnter)
                        strEnterUser += '(有事儿来不了)';
                    if (isSignIn)
                        strEnterUser += '已签到';
                    strEnterUser += '</span></div>';

                    //如果该用户 已报名 且未签到 且当前是管理员的话，则开放签到功能
                    if (isEnter && !isSignIn && currentUser.Id == activityInfo.Manager)
                        $('#signInUser').append('<div class="btn-success SignIn" data-role="BTButton" auid="' + obj.Id + '">' + obj.UserName + '签到</div>');
                }

                //一次性渲染提高页面运行效率
                $('#enterUser').append(strEnterUser);
                $('#signInUser').append(strSignInUser);

                //显示是否报名
                if (!isCurSignIn) {
                    if (isCurEnter) {
                        $('#btnNotEnter').show();
                    } else {
                        $('#btnEnter').show();
                    }
                }

                InitModule();
                BingoTouch.WebView.wait(false);

                //如果该用户未签到且当前是管理员的话，则开放签到功能
                if (currentUser.Id == activityInfo.Manager) {
                    $('#signInUserListView').show();
                    $('.SignIn').tap(function (e) {
                        if (!BingoTouch.Common.confirm($(this).text() + "是否已到？")) return;
                        var auid = $(this).attr('auid');
                        var _this = $(this);
                        ReqGet(SignIn + auid, false, function () {
                            BingoTouch.Common.alert('签到成功！');
                            $('#' + auid).append('已签到');
                            _this.remove();
                            //BingoTouch.WebView.refresh();
                        });
                        return false;
                    });

                    $('#btnClose').show();
                    $('#btnClose').tap(function (e) {
                        if (!BingoTouch.Common.confirm("确定要关闭该活动吗？")) return;

                        ReqGet(Close + id, false, function () {
                            BingoTouch.WebView.load('home.html');
                        });
                        return false;
                    });
                }
            });
        });

        $('#btnEnter').tap(function (e) {
            BingoTouch.WebView.wait(true);
            var url = Enter + 'LoginId=' + currentUser.Id + '&ActivityId=' + id;
            ReqGet(url, true, function () {
                BingoTouch.WebView.wait(false);
                BingoTouch.Common.alert('恭喜您，报名成功！');
                BingoTouch.WebView.refresh();
            });
        });

        $('#btnNotEnter').tap(function (e) {
            if (!BingoTouch.Common.confirm('锻炼身体需要坚持噢，您真的不去了吗？')) return;
            BingoTouch.WebView.wait(true);
            var url = Cancel + 'LoginId=' + currentUser.Id + '&ActivityId=' + id;
            ReqGet(url, true, function () {
                BingoTouch.WebView.wait(false);
                BingoTouch.Common.alert('取消报名成功！');
                BingoTouch.WebView.refresh();
            });
        });

    };
</script>

</head>
<body>
<div data-role="page" class="container">
    <div class="header" fixed="top">
        <div class="header-left">
            <div class="btn-back" data-role="BTButton" data-url="home.html">返回</div>
        </div>
        <h1 class="title">当前活动信息</h1>
        <div class="header-right">
            <div class="btn-primary" data-role="BTButton" id="refresh">
                <img src="demo/statics/images/icon-refresh.png" alt=""/>
            </div>
        </div>
    </div>
	<div class="content">
    	<div class="content">
        	<div class="content-inner" style="padding-top:80px;">
				<h1 id="title"></h1>
                <span id="description"></span> <br />
			
                <div id="btnEnter" style="display:none;" class="btn-success btn-xlarge" data-role="BTButton">马上报名</div>
                
                <br />
                <ul class="list-view list-collapse">
					<li>
                        <div data-role="BTButton" class="btn-active" data-icon="icon-list-down" icon-dir="right" mouseup="false">已报名人员</div>
						<div class="collapse-content">
							<ul class="list-view" id="enterUser">
				            </ul>	
						</div>
					</li>
				</ul>
                <br />

                <ul class="list-view list-collapse" style="display:none" id="signInUserListView">
					<li>
                        <div data-role="BTButton" class="btn-active" data-icon="icon-list-down" icon-dir="right" mouseup="false">签到管理</div>
						<div class="collapse-content">
							<ul class="list-view" id="signInUser">
				            </ul>	
						</div>
					</li>
				</ul>


                <div id="btnNotEnter" style="display:none;" class="btn-danger btn-xxlarge" data-role="BTButton">有事不去了</div>
            

                <div id="btnClose" style="display:none;" class="btn-danger btn-xxlarge" data-role="BTButton">关闭活动</div>
                <br />
                <br />
            </div>
        </div>
	</div>

    <!-- 底部导航 -->
	<div class="footer" fixed="bottom">			
		<div class="navbar">
			<ul class="grid-d" sonmenu="true" sonmenu-dir="top">
				<li><div data-role="BTButton" class="btn-inverse btn-active" data-icon="demo/statics/images/icon-home.png" icon-dir="top" mouseup="false" data-url="home.html">报名</div></li>
				<li><div data-role="BTButton" class="btn-inverse" data-icon="demo/statics/images/icon-list.png" icon-dir="top" mouseup="false" data-url="finance.html">财务</div></li>
				<li><div data-role="BTButton" class="btn-inverse" data-icon="demo/statics/images/icon-search.png" icon-dir="top" mouseup="false" data-url="account.html">账户</div></li>
				<li><div data-role="BTButton" class="btn-inverse" data-icon="demo/statics/images/icon-setting.png" icon-dir="top" mouseup="false" data-url="contact.html">成员</div></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>